<template>
	<div class="orderPay">
		<el-card shadow="hover">
			<div class="order-pay mb15">
				<el-form ref="formDataRef" :inline="true" :model="formData" label-width="120px" class="demo-form-inline">
					<el-row>
						<el-col :span="8">
							<el-form-item prop="orderNumber" label="订单编号:" style="width: 100%">
								<el-input maxlength="200" v-model="formData.orderNumber" placeholder="订单编号" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="paymentChannel" label="支付渠道" style="width: 100%">
								<el-select style="width: 100%" @change="searchFun()" v-model="formData.paymentChannel" placeholder="Select">
									<el-option v-for="item in PAYMENT_LIST" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="paymentStatus" label="支付状态" style="width: 100%">
								<el-select style="width: 100%" @change="searchFun()" v-model="formData.paymentStatus" placeholder="Select">
									<el-option v-for="item in PAYMENT_SUCESS_STATUS_LIST" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="paymentTime" label="支付时间" style="width: 100%">
								<el-date-picker
									value-format="YYYY-MM-DD"
									v-model="formData.paymentTime"
									type="datetimerange"
									range-separator="To"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="paymentNo" label="支付单号" style="width: 100%">
								<el-input maxlength="200" @keyup.enter="searchFun()" v-model="formData.paymentNo" placeholder="模糊搜索" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="customerName" label="客户名字" style="width: 100%">
								<el-input maxlength="200" @keyup.enter="searchFun()" v-model="formData.customerName" placeholder="模糊搜索" />
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item prop="paymentAccountNumber" label="支付账号" style="width: 100%">
								<el-input maxlength="200" @keyup.enter="searchFun()" v-model="formData.paymentAccountNumber" placeholder="模糊搜索" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label=" " style="width: 100%">
								<el-button type="primary" @click="searchFun">搜索</el-button>
								<el-button @click="resetFrom">重置</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table v-loading="loading" :data="tableData" style="width: 100%">
				<!-- <el-table-column prop="checked" label width="40px">
					<template #default="scope">
						<el-checkbox v-model="scope.row.checked" label></el-checkbox>
					</template>
				</el-table-column> -->
				<el-table-column prop="orderNumber" width="60px" label="序号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="orderSn" width="200px" label="订单编号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="paymentNo" width="250px" label="支付单号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="paymentTime" width="180px" label="支付时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="memberUsername" label="客户" show-overflow-tooltip></el-table-column>
				<el-table-column prop="isPayed" label="支付状态" show-overflow-tooltip></el-table-column>
				<el-table-column prop="payType" label="支付渠道" show-overflow-tooltip></el-table-column>
				<el-table-column prop="refundStatus" label="退款状态" show-overflow-tooltip></el-table-column>
				<el-table-column prop="refundPrice" label="退款金额" show-overflow-tooltip></el-table-column>
				<el-table-column prop="refundTime" label="退款时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="paymentAccountNumber" width="200px" label="支付账号" show-overflow-tooltip></el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="page.current"
				background
				v-model:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			>
			</el-pagination>
		</el-card>
	</div>
</template>
<script setup name="OrderPay">
import { ElMessage } from 'element-plus';
import useOrderPageState from '/@/utils/pageState/orderState';
import { timeFormat } from '/@/utils/filters';
import { useOrderApi } from '/@/api/order';
import dayjs from 'dayjs';
import useCouponPageState from '/@/utils/pageState/couponState';
import { deepCopy } from '/@/utils';

const { getOrderPayPage } = useOrderApi();
const { getCurrencySymbolTextBySite } = useCouponPageState();
const { getIsPayedText, getPayTypeText, getRefundText, PAYMENT_LIST, PAYMENT_SUCESS_STATUS_LIST } = useOrderPageState();

let loading = ref(false);
// 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
let tableData = ref([]);

const formData = ref({
	orderNumber: '',
	paymentChannel: '',
	paymentStatus: '',
	paymentTime: [null, null],
	paymentNo: '',
	customerName: '',
	paymentAccountNumber: '',
});

const page = ref({
	pageSize: 10,
	current: 1,
	total: 0,
});

init();

function init() {
	getList();
}

function searchFun() {
	if (loading.value) {
		return;
	}
	page.value = {
		pageSize: page.value.pageSize,
		current: 1,
		total: page.value.total,
	};
	getList();
}

async function getList() {
	if (loading.value) {
		return;
	}
	loading.value = true;

	try {
		let params = {
			current: page.value.current,
			pageSize: page.value.pageSize,
			orderSn: formData.value.orderNumber,
			payType: formData.value.paymentChannel === '' ? null : formData.value.paymentChannel,
			isPayed: formData.value.paymentStatus === '' ? null : formData.value.paymentStatus,
			strTime: formData.value.paymentTime
				? formData.value.paymentTime[0] === null
					? null
					: dayjs(formData.value.paymentTime[0]).format('YYYY-MM-DD[T]HH:mm:ss[Z]')
				: null,
			endTime: formData.value.paymentTime
				? formData.value.paymentTime[1] === null
					? null
					: dayjs(formData.value.paymentTime[1]).format('YYYY-MM-DD[T]HH:mm:ss[Z]')
				: null,
			paymentId: formData.value.paymentNo,
			receiverName: formData.value.customerName,
			memberUsername: formData.value.paymentAccountNumber,
		};
		let res = await getOrderPayPage(params);
		if (res.code !== 200) {
			loading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		loading.value = false;
		page.value = {
			pageSize: res.data.pageSize,
			current: res.data.current,
			total: res.data.total,
		};

		let tempList = [];

		tempList = res.data.data.map((ceil, index) => {
			return {
				id: ceil.id,
				checked: false,
				orderNumber: (res.data.current - 1) * 10 + index + 1,
				orderSn: ceil.orderSn ? ceil.orderSn : '-',
				paymentNo: ceil.paymentId ? ceil.paymentId : '-',
				paymentTime: ceil.paymentTime ? timeFormat(ceil.paymentTime) : '-',
				memberUsername: ceil.receiverName ? ceil.receiverName : '-',
				isPayed: getIsPayedText(ceil.isPayed),
				payType: getPayTypeText(ceil.payType),
				refundStatus: getRefundText(ceil.isReturn),
				refundPrice: getCurrencySymbolTextBySite(ceil.sourceType) + (ceil.returnPrice ? ceil.returnPrice : 0),
				refundTime: ceil.returnTime ? timeFormat(ceil.returnTime) : '-',
				paymentAccountNumber: ceil.billReceiverEmail ? ceil.billReceiverEmail : '-',
			};
		});

		tableData.value = tempList;
	} catch (error) {
		loading.value = false;
		ElMessage({
			type: 'error',
			message: '获取列表失败',
		});
	}
}

const formDataRef = ref();
const resetFrom = () => {
	formDataRef.value.resetFields();
};

// 分页改变
const onHandleSizeChange = (val) => {
	page.pageSize = val;
	getList();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	page.current = val;
	getList();
};
// 页面加载时
onMounted(() => {});
</script>
<style lang="scss" scoped></style>
